<template>
  <div class="card content-box">
    <span class="text"> 按钮权限 🍓🍇🍈🍉</span>
    <el-alert
      class="mb20"
      :title="`当前用户按钮权限：${JSON.stringify(Object.keys(BUTTONS))}`"
      type="success"
      :closable="false"
    />
    <el-divider content-position="left"> 使用 Hooks 方式绑定权限 </el-divider>
    <el-row class="mb20">
      <el-button v-if="BUTTONS.add" type="primary" :icon="CirclePlus"> 新增 </el-button>
      <el-button v-if="BUTTONS.edit" type="warning" :icon="EditPen"> 编辑 </el-button>
      <el-button v-if="BUTTONS.delete" type="danger" plain :icon="Delete"> 删除 </el-button>
      <el-button v-if="BUTTONS.import" type="info" plain :icon="Upload"> 导入数据 </el-button>
      <el-button v-if="BUTTONS.export" type="info" plain :icon="Download"> 导出数据 </el-button>
    </el-row>
    <el-divider content-position="left"> 使用 v-auth 指令绑定单个权限 </el-divider>
    <el-row class="mb20">
      <el-button v-auth="'add'" type="primary" :icon="CirclePlus"> 新增 </el-button>
      <el-button v-auth="'edit'" type="warning" :icon="EditPen"> 编辑 </el-button>
      <el-button v-auth="'delete'" type="danger" plain :icon="Delete"> 删除 </el-button>
      <el-button v-auth="'import'" type="info" plain :icon="Upload"> 导入数据 </el-button>
      <el-button v-auth="'export'" type="info" plain :icon="Download"> 导出数据 </el-button>
    </el-row>
    <el-divider content-position="left"> 使用 v-auth 指令绑定多个权限 </el-divider>
    <el-row>
      <el-button v-auth="['add', 'edit', 'delete', 'import', 'export']" type="primary" :icon="CirclePlus">
        新增
      </el-button>
      <el-button v-auth="['add', 'edit', 'delete', 'import', 'export']" type="warning" :icon="EditPen">
        编辑
      </el-button>
      <el-button v-auth="['add', 'edit', 'delete', 'import', 'export']" type="danger" plain :icon="Delete">
        删除
      </el-button>
      <el-button v-auth="['add', 'edit', 'delete', 'import', 'export']" type="info" plain :icon="Upload">
        导入数据
      </el-button>
      <el-button v-auth="['add', 'edit', 'delete', 'import', 'export']" type="info" plain :icon="Download">
        导出数据
      </el-button>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="authButton">
  import { useAuthButtons } from "@/hooks/useAuthButtons"
  import { CirclePlus, Delete, EditPen, Download, Upload } from "@element-plus/icons-vue"

  const { BUTTONS } = useAuthButtons()
</script>

<style scoped lang="scss">
  @import "./index.scss";
</style>
